<template>
  <div class="note-folder">
    <div class="note-folder-tool">
      <div class="item">
        <span @click="backList" class="icon">
          <mu-icon value="返回"></mu-icon>
        </span>
      </div>
      <div class="flex">{{title}}</div>
    </div>
    <div class="folder-list">
      <ul class="folder-note">
        <li class="clearfix" @click="openNote">
          <div class="pull-left">
            <span class="icon">
              <mu-icon value="图标1"></mu-icon>
            </span>
            <span>{{noteTaking}}</span>
          </div>
          <div class="pull-right">
            {{notes}}
            <span class="icon">
              <mu-icon value="去列表"></mu-icon>
            </span>
          </div>
        </li>
      </ul>
      <ul class="folder-trash">
        <li class="clearfix" @click="openTrash">
          <div class="pull-left">
            <span class="icon">
              <mu-icon value="图标2"></mu-icon>
            </span>
            <span>{{trash}}</span>
          </div>
          <div class="pull-right">
            {{deleteNote}}
            <span class="icon">
              <mu-icon value="去列表"></mu-icon>
            </span>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "NoteFolder",
  data() {
    return {
      title: "便签夹",
      noteTaking: "随手记",
      trash: "废纸篓"
    };
  },
  computed: {
    deleteNote() {
      return this.$store.state.trashNotes.length;
    },
    notes() {
      return this.$store.state.notes.length;
    }
  },
  methods: {
    //返回便签列表
    backList() {
      this.$router.push({ path: "/" });
    },
    //打开废纸篓中的便签列表
    openTrash() {
      this.$router.push({ path: "trash" });
    },
    //打开随手记
    openNote() {
      this.$router.push({ path: "/" });
    }
  }
};
</script>
<style scoped>
.note-folder-tool {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: left;
  display: flex;
  box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.note-folder-tool .item {
  padding: 0 10px;
}
.note-folder-tool .flex {
  margin-left: 20px;
  flex: 1;
}
.note-folder-tool .item .icon {
  font-size: 12px;
  color: #ffca00;
  vertical-align: middle;
  cursor: pointer;
}
.folder-list .icon {
  margin-right: 12px;
  color: #aaa;
}
.folder-list li span {
  margin: 5px 15px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
}

.folder-list ul {
  margin-top: 12px;
}
.folder-list li {
  padding: 15px;
  background: #fff;
  cursor: pointer;
}
.clearfix:after {
  display: block;
  clear: both;
  content: "";
  visibility: hidden;
  height: 0;
}
.clearfix {
  zoom: 1;
}
.pull-left {
  float: left;
}
.pull-right {
  float: right;
}
</style>

